<template>
  <div class="change-class body-bg">
    <div v-if="!initLoading">
      <ul class="list-cont" v-if="list.length">
        <li class="list-items border-bottom" v-for="(item,index) in list" :key="index" @click="editChild(item)">
          <img class="head-img" :src="item.avatar || '/static/images/user.png'" alt="headImg">
          <div class="infor">
            <p class="name">{{item.name}}</p>
            <p class="birthday">生日：{{item.birthday}}</p>
          </div>
          <van-icon name="arrow" color="#CBD2D8" size="14" />
        </li>
      </ul>
      <div v-else class="empty">
        <img src="/static/images/empty-icon.png" alt="空">
        <p class="empty-tips">没有孩子，快去添加孩子吧~</p>
      </div>
    </div>
    <div v-else class="init-loading"><van-loading type="spinner" color="#1989fa" /></div>
    <div class="add-btn" @click="addChild">添加孩子</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      initLoading: true, // 初始加载
      list:[]
    }
  },
  onLoad() {
    this.getStudentList();
  },
  methods: {
    // 获取孩子列表
    getStudentList() {
      this.$fetch
        .getStudentList({
          is_default: ''
        }).then(res => {
          this.initLoading = false;
          this.list = res.result;
        })
        .catch(err => {
          this.initLoading = false;
        });
    },
    // 添加孩子
    addChild() {
      this.$store.commit("setAvatar", "");
      this.$store.commit("setChildName", "");
      this.$store.commit("setSex", "1");
      this.$store.commit("setBirthday", "");
      // this.$store.commit("setIdCard", "");
      // this.$store.commit("setHeight", "");
      // this.$store.commit("setWeight", "");
      // this.$store.commit("setClothingSize", "");
      // this.$store.commit("setFootSize", "");
      wx.navigateTo({
        url: '/pages/addChild/main?from=add'
      })
    },
    // 编辑孩子
    editChild(item) {
      this.$store.commit("setAvatar", item.avatar);
      this.$store.commit("setChildName", item.name);
      this.$store.commit("setSex", item.sex);
      this.$store.commit("setBirthday", item.birthday);
      // this.$store.commit("setIdCard", item.name);
      // this.$store.commit("setHeight", item.name);
      // this.$store.commit("setWeight", item.height);
      // this.$store.commit("setClothingSize", item.weight);
      // this.$store.commit("setFootSize", item.name);
      wx.navigateTo({
        url: `/pages/addChild/main?from=edit`
      })
    }
  },
}
</script>

<style lang="less" scope>
.change-class{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .list-cont{
    width: 100%;
    background: #fff;
    margin-top: 10px;
    .list-items{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 16px;
      box-sizing: border-box;
      position: relative;
      .van-icon{
        position: absolute;
        right: 16px;
      }
      &:last-child{
        border-bottom: 0;
      }
      .head-img{
        width: 40px;
        min-width: 40px;
        height: 40px;
        display: block;
        border-radius: 50%;
      }
      .infor{
        flex-grow: 1;
        margin-left: 14px;
        .name{
          font-size: 14px;
          color: #333;
          font-weight: bold;
        }
        .birthday{
          font-size: 12px;
          color: #999;
          margin-top: 8px;
        }
      }
    }
  }
  .add-btn{
    width: 300px;
    line-height: 45px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background: #00B8EE;
    border-radius: 22px;
    margin: 50px auto;
  }
}
</style>
